<template>
  <div class="music-detail-container">
    <!-- 音乐封面和基本信息 -->
    <div class="music-header">
      <div class="music-cover-large">
        <img :src="music.cover" alt="专辑封面" class="cover-image" :class="{ 'rotating': isPlaying }">
      </div>
      <div class="music-basic-info">
        <h1 class="music-title-large">{{ music.title }}</h1>
        <p class="music-artist-large">{{ music.artist }}</p>
        <p class="music-album">专辑：{{ music.album }}</p>
        <div class="music-stats">
          <span class="stat-item"><i class="icon-play"></i> {{ formatNumber(music.plays) }} 次播放</span>
          <span class="stat-item"><i class="icon-like"></i> {{ formatNumber(music.likes) }} 次点赞</span>
          <span class="stat-item"><i class="icon-comment"></i> {{ formatNumber(music.comments) }} 条评论</span>
        </div>
        <div class="music-actions">
          <button class="action-btn primary-btn" @click="togglePlayPause">
            <i v-if="isPlaying" class="icon-pause"></i>
            <i v-else class="icon-play"></i>
            {{ isPlaying ? '暂停' : '播放' }}
          </button>
          <button class="action-btn secondary-btn" :class="{ 'active': isFavorite }" @click="toggleFavorite">
            <i class="icon-heart"></i>
            {{ isFavorite ? '已收藏' : '收藏' }}
          </button>
          <button class="action-btn secondary-btn" @click="shareMusic">
            <i class="icon-share"></i>
            分享
          </button>
        </div>
      </div>
    </div>

    <!-- 主要内容区域 -->
    <div class="main-content">
      <!-- 左侧：歌词和评论 -->
      <div class="left-content">
        <!-- 歌词区域 -->
        <div class="lyrics-section">
          <div class="section-header">
            <h2>歌词</h2>
            <div class="lyrics-toggle">
              <button class="toggle-btn active" @click="showOriginalLyrics">原歌词</button>
              <button class="toggle-btn" @click="showTranslatedLyrics">译歌词</button>
            </div>
          </div>
          <div ref="lyricsContainer" class="lyrics-container">
            <div 
              v-for="(line, index) in currentLyrics" 
              :key="index" 
              class="lyric-line" 
              :class="{ 'active': currentLyricIndex === index }"
            >
              {{ line.text }}
            </div>
          </div>
        </div>

        <!-- 评论区 -->
        <div class="comments-section">
          <div class="section-header">
            <h2>评论区 ({{ formatNumber(music.comments) }})</h2>
            <button class="sort-btn" @click="sortComments">
              <i class="icon-sort"></i>
              最新评论
            </button>
          </div>

          <!-- 评论输入框 -->
          <div class="comment-input-area">
            <img v-if="currentUser" v-img-error :src="currentUser.avatar" alt="用户头像" class="user-avatar">
        <img v-else v-img-error src="https://placehold.co/40x40/CCCCCC/FFFFFF?text=游客" alt="游客头像" class="user-avatar">
            <div class="comment-input-wrapper">
              <textarea 
                v-model="newComment"
                placeholder="说点什么吧..."
                class="comment-input"
                rows="3"
              ></textarea>
              <button class="submit-comment-btn" :disabled="!newComment.trim()" @click="submitComment">
                发送评论
              </button>
            </div>
          </div>

          <!-- 评论列表 -->
          <div class="comments-list">
            <div v-for="comment in comments" :key="comment.id" class="comment-item">
              <img v-img-error :src="comment.userAvatar" alt="用户头像" class="comment-user-avatar">
              <div class="comment-content-wrapper">
                <div class="comment-user-info">
                  <span class="comment-username">{{ comment.username }}</span>
                  <span class="comment-time">{{ comment.time }}</span>
                </div>
                <div class="comment-content">{{ comment.content }}</div>
                <div class="comment-actions">
                  <button class="comment-action-btn" @click="likeComment(comment.id)">
                    <i class="icon-comment-like"></i>
                    <span>{{ formatNumber(comment.likes) }}</span>
                  </button>
                  <button class="comment-action-btn" @click="replyComment(comment.id)">
                    <i class="icon-comment-reply"></i>
                    <span>回复</span>
                  </button>
                </div>
                <!-- 评论回复 -->
                <div v-if="comment.replies && comment.replies.length > 0" class="comment-replies">
                  <div v-for="reply in comment.replies.slice(0, 2)" :key="reply.id" class="reply-item">
                    <span class="reply-username">{{ reply.username }}：</span>
                    <span class="reply-content">{{ reply.content }}</span>
                  </div>
                  <button v-if="comment.replies.length > 2" class="show-more-replies" @click="showMoreReplies(comment.id)">
                      查看全部 {{ comment.replies.length }} 条回复
                    </button>
                </div>
              </div>
            </div>
          </div>

          <!-- 加载更多评论 -->
          <button class="load-more-comments" @click="loadMoreComments">加载更多评论</button>
        </div>
      </div>

      <!-- 右侧：相关推荐和歌手信息 -->
      <div class="right-content">
        <!-- 相关推荐 -->
        <div class="related-music">
          <div class="section-header">
            <h2>相关推荐</h2>
          </div>
          <div class="related-list">
            <div v-for="item in relatedMusic" :key="item.id" class="related-item">
              <img :src="item.cover" alt="专辑封面" class="related-cover">
              <div class="related-info">
                <div class="related-title">{{ item.title }}</div>
                <div class="related-artist">{{ item.artist }}</div>
              </div>
              <button class="related-play-btn" @click="playRelatedMusic(item.id)">
                <i class="icon-play-small"></i>
              </button>
            </div>
          </div>
        </div>

        <!-- 歌手信息 -->
        <div class="artist-info">
          <div class="section-header">
            <h2>歌手信息</h2>
          </div>
          <div class="artist-profile">
            <img v-img-error :src="music.artistAvatar" alt="歌手头像" class="artist-avatar">
            <div class="artist-details">
              <div class="artist-name">{{ music.artist }}</div>
              <div class="artist-followers">{{ formatNumber(music.artistFollowers) }} 粉丝</div>
              <button class="follow-artist-btn" :class="{ 'following': isFollowingArtist }" @click="toggleFollowArtist">
                {{ isFollowingArtist ? '已关注' : '关注' }}
              </button>
            </div>
          </div>
          <p class="artist-bio">{{ music.artistBio }}</p>
        </div>
      </div>
    </div>

    <!-- 底部音乐播放器 -->
    <div class="mini-player">
      <MusicPlayer 
        :music-id="music.id" 
        :music-url="music.url"
        :cover-url="music.cover"
        :playlist="relatedMusic"
      />
    </div>
  </div>
</template>

<script>
import MusicPlayer from '../components/MusicPlayer.vue'
import { useRouter, useRoute } from 'vue-router'

export default {
  name: 'MusicDetailView',
  components: {
    MusicPlayer,
  },
  data() {
    return {
      // 当前音乐信息
      music: {
        id: '1',
        title: '春日漂流',
        artist: '音乐创作人',
        album: '春日漂流',
        cover: 'https://placehold.co/500x500/2196F3/FFFFFF?text=春日漂流',
        artistAvatar: 'https://placehold.co/100x100/2196F3/FFFFFF?text=音乐',
        url: 'https://placehold.co/1x1/2196F3/FFFFFF?text=春日漂流.mp3',
        duration: 240,
        plays: 156000,
        likes: 23400,
        comments: 1250,
        artistFollowers: 350000,
        artistBio: '音乐创作人，华语乐坛新生代歌手，擅长流行、民谣等多种风格的创作与演唱。代表作品有《春日漂流》、《夏日记忆》等。',
      },
      // 歌词数据
      originalLyrics: [
        { time: 0, text: '春日漂流' },
        { time: 20, text: '作词：音乐创作人' },
        { time: 40, text: '作曲：音乐创作人' },
        { time: 60, text: '演唱：音乐创作人' },
        { time: 80, text: '春天的风轻轻吹过我的脸颊' },
        { time: 100, text: '带着花香和一丝温柔的惆怅' },
        { time: 120, text: '我站在河边看着流水向东流' },
        { time: 140, text: '思绪随着波浪慢慢漂流' },
        { time: 160, text: '那些逝去的时光啊' },
        { time: 180, text: '就像这河水一去不回头' },
        { time: 200, text: '但我会记得那些美好的回忆' },
        { time: 220, text: '永远珍藏在心底最深处' },
        { time: 240, text: '春日漂流' },
      ],
      translatedLyrics: [
        { time: 0, text: 'Spring Drift' },
        { time: 20, text: 'Lyrics: Music Creator' },
        { time: 40, text: 'Composition: Music Creator' },
        { time: 60, text: 'Singing: Music Creator' },
        { time: 80, text: 'The spring wind gently blows across my cheeks' },
        { time: 100, text: 'With the fragrance of flowers and a touch of gentle melancholy' },
        { time: 120, text: 'I stand by the river watching the water flow east' },
        { time: 140, text: 'Thoughts slowly drift with the waves' },
        { time: 160, text: 'Those passing times' },
        { time: 180, text: 'Like this river water, never looking back' },
        { time: 200, text: 'But I will remember those beautiful memories' },
        { time: 220, text: 'Forever treasured in the deepest part of my heart' },
        { time: 240, text: 'Spring Drift' },
      ],
      // 播放状态
      isPlaying: false,
      currentTime: 0,
      currentLyricIndex: 0,
      showOriginalLyrics: true,
      // 评论数据
      comments: [
        {
          id: 1,
          username: '音乐爱好者',
          userAvatar: 'https://placehold.co/40x40/FB7299/FFFFFF?text=音',
          content: '这首歌太好听了！每次听都会想起春天的美好时光。',
          time: '2小时前',
          likes: 356,
          replies: [
            {
              id: 101,
              username: '音乐创作人',
              content: '谢谢你的喜欢！春天快乐！',
            },
          ],
        },
        {
          id: 2,
          username: '春日暖阳',
          userAvatar: 'https://placehold.co/40x40/23ADE5/FFFFFF?text=春',
          content: '歌词写得真好，旋律也很治愈，已经单曲循环一整天了。',
          time: '4小时前',
          likes: 289,
          replies: [],
        },
        {
          id: 3,
          username: '漂流者',
          userAvatar: 'https://placehold.co/40x40/9C27B0/FFFFFF?text=漂',
          content: '前奏一起就被吸引了，真的很有春天的感觉。',
          time: '6小时前',
          likes: 234,
          replies: [],
        },
        {
          id: 4,
          username: '回忆收藏家',
          userAvatar: 'https://placehold.co/40x40/4CAF50/FFFFFF?text=回',
          content: '"那些逝去的时光啊，就像这河水一去不回头"这句歌词太戳心了。',
          time: '8小时前',
          likes: 456,
          replies: [],
        },
        {
          id: 5,
          username: '音乐达人',
          userAvatar: 'https://placehold.co/40x40/FF9800/FFFFFF?text=达',
          content: '编曲很有层次感，人声处理也很细腻，期待更多作品！',
          time: '10小时前',
          likes: 189,
          replies: [],
        },
      ],
      // 相关推荐音乐
      relatedMusic: [
        {
          id: 2,
          title: '夏日记忆',
          artist: '音乐创作人',
          cover: 'https://placehold.co/100x100/FF9800/FFFFFF?text=夏日记忆',
          url: 'https://placehold.co/1x1/FF9800/FFFFFF?text=夏日记忆.mp3',
          duration: 220,
        },
        {
          id: 3,
          title: '秋风萧瑟',
          artist: '音乐创作人',
          cover: 'https://placehold.co/100x100/F44336/FFFFFF?text=秋风萧瑟',
          url: 'https://placehold.co/1x1/F44336/FFFFFF?text=秋风萧瑟.mp3',
          duration: 250,
        },
        {
          id: 4,
          title: '冬日恋歌',
          artist: '音乐创作人',
          cover: 'https://placehold.co/100x100/23ADE5/FFFFFF?text=冬日恋歌',
          url: 'https://placehold.co/1x1/23ADE5/FFFFFF?text=冬日恋歌.mp3',
          duration: 230,
        },
        {
          id: 5,
          title: '四季循环',
          artist: '音乐创作人',
          cover: 'https://placehold.co/100x100/4CAF50/FFFFFF?text=四季循环',
          url: 'https://placehold.co/1x1/4CAF50/FFFFFF?text=四季循环.mp3',
          duration: 270,
        },
        {
          id: 6,
          title: '时光流逝',
          artist: '音乐创作人',
          cover: 'https://placehold.co/100x100/9C27B0/FFFFFF?text=时光流逝',
          url: 'https://placehold.co/1x1/9C27B0/FFFFFF?text=时光流逝.mp3',
          duration: 260,
        },
      ],
      // 用户交互状态
      newComment: '',
      isFavorite: false,
      isFollowingArtist: false,
      currentUser: null,
      // 定时器
      lyricTimer: null,
    }
  },
  computed: {
    // 获取当前显示的歌词
    currentLyrics() {
      return this.showOriginalLyrics ? this.originalLyrics : this.translatedLyrics
    },
  },
  created() {
    const route = useRoute()
    const musicId = route.params.id || '1'
    this.loadMusic(musicId)
    this.currentUser = JSON.parse(localStorage.getItem('currentUser'))
  },
  mounted() {
    // 开始监听歌词滚动
    this.startLyricTimer()
  },
  beforeUnmount() {
    // 清理定时器
    if (this.lyricTimer) {
      clearInterval(this.lyricTimer)
    }
  },
  methods: {
    // 加载音乐信息
    loadMusic(musicId) {
      // 在实际应用中，这里应该从API获取音乐信息
      // 这里使用模拟数据
      console.log('加载音乐:', musicId)
    },
    
    // 格式化数字，添加单位
    formatNumber(num) {
      if (num >= 10000) {
        return (num / 10000).toFixed(1) + '万'
      }
      if (num >= 1000) {
        return (num / 1000).toFixed(1) + '千'
      }
      return num.toString()
    },
    
    // 切换播放/暂停
    togglePlayPause() {
      this.isPlaying = !this.isPlaying
      // 在实际应用中，这里应该控制音乐的播放/暂停
    },
    
    // 切换收藏状态
    toggleFavorite() {
      this.isFavorite = !this.isFavorite
      // 在实际应用中，这里应该调用收藏API
    },
    
    // 分享音乐
    shareMusic() {
      // 在实际应用中，这里应该调用分享API
      alert('分享功能已触发！')
    },
    
    // 显示原歌词
    showOriginalLyrics() {
      this.showOriginalLyrics = true
      // 重置歌词索引
      this.updateLyricIndex()
    },
    
    // 显示译歌词
    showTranslatedLyrics() {
      this.showOriginalLyrics = false
      // 重置歌词索引
      this.updateLyricIndex()
    },
    
    // 开始歌词滚动定时器
    startLyricTimer() {
      this.lyricTimer = setInterval(() => {
        if (this.isPlaying) {
          this.currentTime += 1
          this.updateLyricIndex()
        }
      }, 1000)
    },
    
    // 更新歌词索引
    updateLyricIndex() {
      const lyrics = this.currentLyrics
      for (let i = lyrics.length - 1; i >= 0; i--) {
        if (this.currentTime >= lyrics[i].time) {
          if (this.currentLyricIndex !== i) {
            this.currentLyricIndex = i
            this.scrollToLyric()
          }
          break
        }
      }
    },
    
    // 滚动到当前歌词
    scrollToLyric() {
      const container = this.$refs.lyricsContainer
      if (container) {
        const lyricLines = container.querySelectorAll('.lyric-line')
        if (lyricLines[this.currentLyricIndex]) {
          const line = lyricLines[this.currentLyricIndex]
          const lineTop = line.offsetTop
          const containerHeight = container.clientHeight
          const lineHeight = line.clientHeight
          container.scrollTop = lineTop - containerHeight / 2 + lineHeight / 2
        }
      }
    },
    
    // 提交评论
    submitComment() {
      if (!this.newComment.trim()) return
      
      const newComment = {
        id: this.comments.length + 1,
        username: this.currentUser ? this.currentUser.username : '游客',
        userAvatar: this.currentUser ? this.currentUser.avatar : 'https://placehold.co/40x40/CCCCCC/FFFFFF?text=游客',
        content: this.newComment,
        time: '刚刚',
        likes: 0,
        replies: [],
      }
      
      this.comments.unshift(newComment)
      this.music.comments++
      this.newComment = ''
    },
    
    // 点赞评论
    likeComment(commentId) {
      const comment = this.comments.find(c => c.id === commentId)
      if (comment) {
        comment.likes++
      }
    },
    
    // 回复评论
    replyComment(commentId) {
      // 在实际应用中，这里应该弹出回复框
      alert('回复评论功能已触发！')
    },
    
    // 播放相关推荐音乐
    playRelatedMusic(musicId) {
      // 在实际应用中，这里应该跳转到对应音乐的详情页或直接播放
      console.log('播放相关音乐:', musicId)
    },
    
    // 关注/取消关注歌手
    toggleFollowArtist() {
      this.isFollowingArtist = !this.isFollowingArtist
      this.music.artistFollowers += this.isFollowingArtist ? 10000 : -10000
      alert(this.isFollowingArtist ? '关注歌手成功' : '取消关注歌手成功')
    },
    
    // 加载更多评论
    loadMoreComments() {
      // 模拟加载更多评论
      const moreComments = [
        {
          id: this.comments.length + 1,
          username: '音乐评论家',
          userAvatar: 'https://placehold.co/40x40/FF5722/FFFFFF?text=评',
          content: '这首歌的编曲很有特色，特别是前奏部分，让人印象深刻。',
          time: '12小时前',
          likes: 156,
          replies: [],
        },
        {
          id: this.comments.length + 2,
          username: '春天的风',
          userAvatar: 'https://placehold.co/40x40/795548/FFFFFF?text=春',
          content: '每次听到这首歌都会想起那年春天的故事，真的很有感触。',
          time: '1天前',
          likes: 203,
          replies: [],
        },
      ]
      this.comments = [...this.comments, ...moreComments]
    },
    
    // 显示更多回复
    showMoreReplies(commentId) {
      const comment = this.comments.find(c => c.id === commentId)
      if (comment && comment.replies && comment.replies.length > 2) {
        alert(`查看全部 ${comment.replies.length} 条回复`)
        // 在实际应用中，这里应该展开所有回复
      }
    },
    
    // 排序评论
    sortComments() {
      // 切换排序方式：最新/最热
      const sortButton = event.currentTarget
      const currentText = sortButton.textContent.trim()
      if (currentText.includes('最新')) {
        sortButton.innerHTML = '<i class="icon-sort"></i> 最热评论'
        // 按点赞数排序
        this.comments.sort((a, b) => b.likes - a.likes)
      } else {
        sortButton.innerHTML = '<i class="icon-sort"></i> 最新评论'
        // 按时间排序（这里使用评论ID作为时间的近似表示）
        this.comments.sort((a, b) => b.id - a.id)
      }
    },
  },
}
</script>

<style scoped>
.music-detail-container {
  min-height: 100vh;
  background-color: var(--bg-color);
  padding-bottom: 120px; /* 为底部播放器留出空间 */
}

/* 音乐封面和基本信息 */
.music-header {
  display: flex;
  gap: 40px;
  padding: 40px;
  background: linear-gradient(135deg, #23ADE5 0%, #9C27B0 100%);
  color: white;
}

.music-cover-large {
  position: relative;
}

.cover-image {
  width: 300px;
  height: 300px;
  border-radius: 16px;
  object-fit: cover;
  box-shadow: 0 12px 48px rgba(0, 0, 0, 0.3);
  transition: transform 0.3s ease;
}

/* 专辑封面旋转动画 */
.cover-image.rotating {
  animation: rotate 20s linear infinite;
}

@keyframes rotate {
  from {
    transform: rotate(0deg);
  }
  to {
    transform: rotate(360deg);
  }
}

.music-basic-info {
  flex: 1;
  display: flex;
  flex-direction: column;
  justify-content: center;
  gap: 16px;
}

.music-title-large {
  font-size: 48px;
  font-weight: bold;
  line-height: 1.2;
  margin: 0;
}

.music-artist-large {
  font-size: 24px;
  opacity: 0.9;
  margin: 0;
}

.music-album {
  font-size: 18px;
  opacity: 0.8;
  margin: 0;
}

.music-stats {
  display: flex;
  gap: 32px;
  margin-top: 16px;
}

.stat-item {
  display: flex;
  align-items: center;
  gap: 8px;
  font-size: 16px;
  opacity: 0.9;
}

.music-actions {
  display: flex;
  gap: 16px;
  margin-top: 24px;
}

.action-btn {
  padding: 12px 24px;
  border: none;
  border-radius: 30px;
  font-size: 16px;
  font-weight: 500;
  cursor: pointer;
  transition: all 0.3s ease;
  display: flex;
  align-items: center;
  gap: 8px;
}

.primary-btn {
  background-color: white;
  color: #FB7299;
}

.primary-btn:hover {
  background-color: #f5f5f5;
  transform: translateY(-2px);
  box-shadow: 0 6px 20px rgba(255, 255, 255, 0.2);
}

.secondary-btn {
  background-color: rgba(255, 255, 255, 0.2);
  color: white;
  border: 1px solid rgba(255, 255, 255, 0.3);
}

.secondary-btn:hover {
  background-color: rgba(255, 255, 255, 0.3);
  transform: translateY(-2px);
}

.secondary-btn.active {
  background-color: #ff4757;
  border-color: #ff4757;
}

/* 主要内容区域 */
.main-content {
  max-width: 1200px;
  margin: 0 auto;
  display: grid;
  grid-template-columns: 2fr 1fr;
  gap: 32px;
  padding: 40px 20px;
}

/* 左侧内容 */
.left-content {
  display: flex;
  flex-direction: column;
  gap: 32px;
}

/* 歌词区域 */
.lyrics-section {
  background-color: var(--card-bg);
  border-radius: 16px;
  padding: 24px;
  box-shadow: 0 2px 16px rgba(0, 0, 0, 0.1);
}

.section-header {
  display: flex;
  justify-content: space-between;
  align-items: center;
  margin-bottom: 24px;
}

.section-header h2 {
  font-size: 24px;
  font-weight: bold;
  color: var(--text-color);
}

.lyrics-toggle {
  display: flex;
  gap: 8px;
}

.toggle-btn {
  padding: 8px 16px;
  background-color: var(--hover-color);
  color: var(--text-secondary);
  border: none;
  border-radius: 20px;
  font-size: 14px;
  cursor: pointer;
  transition: all 0.3s ease;
}

.toggle-btn:hover {
  background-color: #e0e0e0;
}

.toggle-btn.active {
  background-color: var(--bilibili-pink);
  color: white;
}

.lyrics-container {
  max-height: 400px;
  overflow-y: auto;
  display: flex;
  flex-direction: column;
  gap: 16px;
}

.lyric-line {
  font-size: 18px;
  color: var(--text-secondary);
  text-align: center;
  line-height: 1.6;
  transition: all 0.3s ease;
  padding: 4px 0;
}

.lyric-line.active {
  color: var(--bilibili-pink);
  font-size: 20px;
  font-weight: bold;
  transform: scale(1.05);
}

/* 评论区 */
.comments-section {
  background-color: var(--card-bg);
  border-radius: 16px;
  padding: 24px;
  box-shadow: 0 2px 16px rgba(0, 0, 0, 0.1);
}

.sort-btn {
  display: flex;
  align-items: center;
  gap: 8px;
  padding: 8px 16px;
  background: none;
  border: 1px solid var(--border-color);
  color: var(--text-secondary);
  border-radius: 20px;
  font-size: 14px;
  cursor: pointer;
  transition: all 0.3s ease;
}

.sort-btn:hover {
  background-color: var(--hover-color);
  color: var(--text-color);
}

/* 评论输入框 */
.comment-input-area {
  display: flex;
  gap: 16px;
  margin-bottom: 24px;
}

.user-avatar {
  width: 48px;
  height: 48px;
  border-radius: 50%;
  object-fit: cover;
  flex-shrink: 0;
}

.comment-input-wrapper {
  flex: 1;
  display: flex;
  flex-direction: column;
  gap: 12px;
}

.comment-input {
  width: 100%;
  border: 1px solid var(--border-color);
  border-radius: 8px;
  padding: 12px 16px;
  font-size: 14px;
  resize: vertical;
  background-color: var(--input-bg);
  color: var(--text-color);
}

.comment-input:focus {
  outline: none;
  border-color: var(--bilibili-pink);
}

.submit-comment-btn {
  align-self: flex-end;
  padding: 10px 24px;
  background-color: var(--bilibili-pink);
  color: white;
  border: none;
  border-radius: 20px;
  font-size: 14px;
  cursor: pointer;
  transition: all 0.3s ease;
}

.submit-comment-btn:hover:not(:disabled) {
  background-color: #e06187;
  transform: translateY(-2px);
}

.submit-comment-btn:disabled {
  background-color: #ccc;
  cursor: not-allowed;
  transform: none;
}

/* 评论列表 */
.comments-list {
  display: flex;
  flex-direction: column;
  gap: 24px;
}

.comment-item {
  display: flex;
  gap: 16px;
}

.comment-user-avatar {
  width: 40px;
  height: 40px;
  border-radius: 50%;
  object-fit: cover;
  flex-shrink: 0;
}

.comment-content-wrapper {
  flex: 1;
}

.comment-user-info {
  display: flex;
  gap: 16px;
  margin-bottom: 8px;
}

.comment-username {
  font-size: 14px;
  font-weight: bold;
  color: var(--text-color);
}

.comment-time {
  font-size: 12px;
  color: var(--text-secondary);
}

.comment-content {
  font-size: 14px;
  color: var(--text-color);
  line-height: 1.6;
  margin-bottom: 12px;
}

.comment-actions {
  display: flex;
  gap: 24px;
}

.comment-action-btn {
  display: flex;
  align-items: center;
  gap: 6px;
  padding: 4px 8px;
  background: none;
  border: none;
  color: var(--text-secondary);
  font-size: 12px;
  cursor: pointer;
  transition: all 0.3s ease;
  border-radius: 4px;
}

.comment-action-btn:hover {
  background-color: var(--hover-color);
  color: var(--bilibili-pink);
}

/* 评论回复 */
.comment-replies {
  margin-top: 16px;
  padding-left: 24px;
  border-left: 2px solid var(--border-color);
}

.reply-item {
  margin-bottom: 8px;
  font-size: 13px;
  color: var(--text-color);
}

.reply-username {
  font-weight: bold;
}

.show-more-replies {
  background: none;
  border: none;
  color: var(--bilibili-pink);
  cursor: pointer;
  font-size: 12px;
  padding: 4px 0;
}

.show-more-replies:hover {
  text-decoration: underline;
}

/* 加载更多评论 */
.load-more-comments {
  width: 100%;
  padding: 12px;
  margin-top: 24px;
  background: none;
  border: 1px solid var(--border-color);
  color: var(--text-secondary);
  font-size: 14px;
  cursor: pointer;
  border-radius: 8px;
  transition: all 0.3s ease;
}

.load-more-comments:hover {
  background-color: var(--hover-color);
  color: var(--text-color);
}

/* 右侧内容 */
.right-content {
  display: flex;
  flex-direction: column;
  gap: 32px;
}

/* 相关推荐 */
.related-music {
  background-color: var(--card-bg);
  border-radius: 16px;
  padding: 24px;
  box-shadow: 0 2px 16px rgba(0, 0, 0, 0.1);
}

.related-list {
  display: flex;
  flex-direction: column;
  gap: 16px;
}

.related-item {
  display: flex;
  align-items: center;
  gap: 12px;
  padding: 12px;
  border-radius: 8px;
  transition: background-color 0.3s ease;
  cursor: pointer;
}

.related-item:hover {
  background-color: var(--hover-color);
}

.related-cover {
  width: 64px;
  height: 64px;
  border-radius: 8px;
  object-fit: cover;
  flex-shrink: 0;
}

.related-info {
  flex: 1;
  min-width: 0;
}

.related-title {
  font-size: 14px;
  font-weight: 500;
  color: var(--text-color);
  margin-bottom: 4px;
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
}

.related-artist {
  font-size: 12px;
  color: var(--text-secondary);
}

.related-play-btn {
  width: 32px;
  height: 32px;
  background-color: var(--bilibili-pink);
  color: white;
  border: none;
  border-radius: 50%;
  cursor: pointer;
  display: flex;
  align-items: center;
  justify-content: center;
  transition: all 0.3s ease;
}

.related-play-btn:hover {
  background-color: #e06187;
  transform: scale(1.1);
}

/* 歌手信息 */
.artist-info {
  background-color: var(--card-bg);
  border-radius: 16px;
  padding: 24px;
  box-shadow: 0 2px 16px rgba(0, 0, 0, 0.1);
}

.artist-profile {
  display: flex;
  align-items: center;
  gap: 16px;
  margin-bottom: 16px;
}

.artist-avatar {
  width: 80px;
  height: 80px;
  border-radius: 50%;
  object-fit: cover;
}

.artist-details {
  flex: 1;
}

.artist-name {
  font-size: 18px;
  font-weight: bold;
  color: var(--text-color);
  margin-bottom: 4px;
}

.artist-followers {
  font-size: 14px;
  color: var(--text-secondary);
  margin-bottom: 8px;
}

.follow-artist-btn {
  padding: 8px 20px;
  background-color: var(--bilibili-pink);
  color: white;
  border: none;
  border-radius: 20px;
  font-size: 14px;
  cursor: pointer;
  transition: all 0.3s ease;
}

.follow-artist-btn:hover {
  background-color: #e06187;
}

.follow-artist-btn.following {
  background-color: var(--hover-color);
  color: var(--text-secondary);
}

.artist-bio {
  font-size: 14px;
  line-height: 1.6;
  color: var(--text-color);
}

/* 底部音乐播放器 */
.mini-player {
  position: fixed;
  bottom: 0;
  left: 0;
  right: 0;
  background-color: rgba(0, 0, 0, 0.9);
  backdrop-filter: blur(10px);
  box-shadow: 0 -4px 16px rgba(0, 0, 0, 0.1);
  z-index: 1000;
}

/* 响应式设计 */
@media (max-width: 1200px) {
  .music-header {
    gap: 32px;
    padding: 32px;
  }
  
  .cover-image {
    width: 240px;
    height: 240px;
  }
  
  .music-title-large {
    font-size: 40px;
  }
  
  .music-stats {
    gap: 24px;
  }
  
  .main-content {
    grid-template-columns: 1fr;
    padding: 32px 20px;
  }
  
  .right-content {
    order: -1;
  }
}

@media (max-width: 768px) {
  .music-header {
    flex-direction: column;
    gap: 24px;
    padding: 24px;
    text-align: center;
  }
  
  .cover-image {
    width: 200px;
    height: 200px;
  }
  
  .music-title-large {
    font-size: 32px;
  }
  
  .music-artist-large {
    font-size: 20px;
  }
  
  .music-stats {
    justify-content: center;
    gap: 16px;
  }
  
  .music-actions {
    justify-content: center;
  }
  
  .main-content {
    padding: 24px 16px;
  }
  
  .section-header {
    flex-direction: column;
    gap: 16px;
    align-items: flex-start;
  }
  
  .lyrics-toggle {
    align-self: flex-end;
  }
  
  .lyrics-container {
    max-height: 300px;
  }
  
  .lyric-line {
    font-size: 16px;
  }
  
  .lyric-line.active {
    font-size: 18px;
  }
}

@media (max-width: 480px) {
  .music-header {
    padding: 16px;
  }
  
  .cover-image {
    width: 160px;
    height: 160px;
  }
  
  .music-title-large {
    font-size: 24px;
  }
  
  .music-artist-large {
    font-size: 18px;
  }
  
  .music-stats {
    flex-direction: column;
    gap: 8px;
    align-items: center;
  }
  
  .music-actions {
    flex-wrap: wrap;
    justify-content: center;
  }
  
  .action-btn {
    flex: 1;
    min-width: 120px;
    justify-content: center;
  }
  
  .main-content {
    padding: 16px 12px;
  }
  
  .comment-input-area {
    gap: 12px;
  }
  
  .user-avatar {
    width: 40px;
    height: 40px;
  }
  
  .submit-comment-btn {
    align-self: stretch;
  }
  
  .related-item {
    padding: 8px;
  }
  
  .related-cover {
    width: 56px;
    height: 56px;
  }
}
</style>